<template>
	<div class="app_main">
		<div class="search_box">
			<el-form :inline="true" :model="searchForm" size="mini" ref="searchForm">
				<search-form-box>
					<template slot="showSearch">
						<el-form-item label="名称" prop="planName">
							<el-input v-model="searchForm.planName" placeholder="请输入方案名称" clearable></el-input>
						</el-form-item>
						<el-form-item label="类型" prop="planType">
							<el-select v-model="searchForm.planType" clearable placeholder="请选择方案类型">
								<el-option v-for="item in plan_type_arr" :key="item.id" :label="item.name"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="锁定状态" prop="lockStatus">
							<el-select v-model="searchForm.lockStatus" placeholder="请选择状态" clearable>
								<el-option label="锁定" value="2"></el-option>
								<el-option label="释放" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="点位编号" prop="mediaPointCode">
							<el-input v-model="searchForm.mediaPointCode" placeholder="请输入点位编号" clearable></el-input>
						</el-form-item>
					</template>
					<template slot="hideSearch">
						<el-form-item label="锁定时间起始" prop="lockDateBegin">
							<el-date-picker v-model="searchForm.lockDateBegin" type="date" placeholder="开始时间"
								format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="至" prop="lockDateEnd">
							<el-date-picker v-model="searchForm.lockDateEnd" type="date" placeholder="结束时间"
								format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="锁定周期起始" prop="lockCycleDateBegin">
							<el-date-picker v-model="searchForm.lockCycleDateBegin" type="date" placeholder="开始时间"
								format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="至" prop="lockCycleDateEnd">
							<el-date-picker v-model="searchForm.lockCycleDateEnd" type="date" placeholder="结束时间"
								format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</template>
					<template slot="searchBtn">
						<el-form-item>
							<el-button size="mini" type="primary" plain @click="search">查询</el-button>
							<el-button size="mini" type="info" plain @click="resetForm('searchForm')">重置</el-button>
						</el-form-item>
					</template>
				</search-form-box>
			</el-form>
		</div>
		<el-row style="margin-bottom: 10px">
			<!--      <el-col :span="18" style="font-size: 14px;font-weight: bold">-->
			<!--        总锁定点位(<span style="color: rgb(54, 163, 247)">{{ lock_total }}</span>)-->
			<!--        当前生效(<span style="color: rgb(64, 201, 198)">{{ current_take_effect }}</span>)-->
			<!--        未来生效(<span style="color: rgb(255, 162, 95)">{{ future_take_effect }}</span>)-->
			<!--      </el-col>-->
			<!--      <el-col :span="6">-->
			<el-button v-permission="'create_point_plan'" @click="showDaterange" size="mini" type="primary">创建锁位
			</el-button>
			<el-button @click="openLinkMiniDialog" size="mini" type="primary">关联小程序方案</el-button>
			<!--      </el-col>-->
		</el-row>
		<div class="data_box">
			<el-table :data="tableData" border style="width: 100%" v-loading="tableLoading" size="mini">
				<el-table-column fixed="left" width="50" label="序号" align="center">
					<template slot-scope="scope">
						<span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column label="锁定状态" width="80" align="center" fixed="left">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.process_status == 2" type="danger" size="mini">锁定中</el-tag>
						<el-tag v-else type="success" size="mini">未锁定</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="资源类型" width="100" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<div v-for="(name,index) in scope.row.media_type_name_list" :key="index">{{ name }}</div>
					</template>
				</el-table-column>
				<el-table-column label="换画类型" width="100" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.type === 1" type="primary" size="mini">否</el-tag>
						<el-tag v-else type="success" size="mini">是</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="点位总数" width="70" align="center" prop="lock_count"
					fixed="left"></el-table-column>
				<el-table-column label="名称" min-width="200" align="center" prop="plan_name"
					fixed="left"></el-table-column>
				<el-table-column label="类型" width="50" align="center">
					<template slot-scope="scope">
						<span>{{ (plan_type_arr.find(item => item.id == scope.row.plan_type) || {}).name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="锁定周期" width="200" align="center" prop="cycle_date">
					<template slot-scope="scope">
						<div v-if="scope.row.cycle_date">
							<el-tag v-for="(item,index) in scope.row.cycle_date.split(',')" :key="index"
								style="margin-top:5px" size="mini">
								{{ item }}
							</el-tag>
						</div>
						<div v-else></div>
					</template>
				</el-table-column>
				<el-table-column label="锁定人" width="90" align="center" prop="lockUserName"></el-table-column>
				<el-table-column label="锁定时间" width="150" align="center" prop="lock_datetime"></el-table-column>
				<el-table-column label="关联合同名称" min-width="200" align="center" prop="contract_name"></el-table-column>
				<el-table-column label="项目名称" min-width="200" align="center" prop="customer_name"></el-table-column>
				<el-table-column label="维护人" width="90" align="center" prop="maintenanceStaffName"></el-table-column>
				<el-table-column fixed="right" label="操作" width="340" align="center">
					<template slot-scope="scope">
						<el-button-group class="btn_group_box">
							<el-tooltip key="btn1" effect="dark" content="查看明细" placement="top">
								<span>
									<el-button size="mini" icon="el-icon-search" @click="getDetail(scope.row.id)">
									</el-button>
								</span>
							</el-tooltip>
							<el-tooltip key="btn2" effect="dark" content="编辑" placement="top">
								<span>
									<el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)">
									</el-button>
								</span>
							</el-tooltip>

              <el-tooltip key="btn13" effect="dark" content="复制锁位" placement="top">
								<span>
									<el-button size="mini" type="success" icon="el-icon-document-copy"
                             @click="copy(scope.row)">
									</el-button>
								</span>
              </el-tooltip>

							<el-tooltip key="btn3" effect="dark" content="删除" placement="top" v-if="scope.row.process_status!=2">
								<span>
									<el-button size="mini" type="danger" icon="el-icon-delete"
										@click="remove(scope.row.id)">
									</el-button>
								</span>
							</el-tooltip>

							<el-tooltip key="btn4"
								v-if="scope.row.hasBillSale && scope.row.type == 1 && scope.row.process_status == 2 && (scope.row.billSaleStatus ===3 || scope.row.billSaleStatus ===4)"
								effect="dark" content="关联销售单在流程中或者已通过,不能释放" placement="top">
								<span>
									<el-button type="warning" size="mini" icon="el-icon-unlock" :disabled="true"
										@click="release(scope.row.id)"></el-button>
								</span>
							</el-tooltip>
							<el-tooltip key="btn5"
								v-if="(scope.row.hasBillSale && scope.row.type == 1 && scope.row.process_status == 2 && (scope.row.billSaleStatus !=3 && scope.row.billSaleStatus !=4))
								|| (!scope.row.hasBillSale && scope.row.type == 1 && scope.row.process_status == 2)"
								effect="dark" content="释放锁定" placement="top">
								<span>
									<el-button type="warning" size="mini" icon="el-icon-unlock"
										@click="release(scope.row.id)"></el-button>
								</span>
							</el-tooltip>
							<el-tooltip key="btn6" effect="dark" content="锁定" placement="top"
								v-if="scope.row.type == 1 && scope.row.process_status == 1">
								<span>
									<el-button type="danger" size="mini" icon="el-icon-lock"
										@click="lock(scope.row.id)"></el-button>
								</span>
							</el-tooltip>
							<el-tooltip key="btn7" v-if="scope.row.process_status==1" effect="dark" content="需要先锁定,再推送"
								placement="top">
								<span>
									<el-button :type="scope.row.is_push?'':'success'" size="mini"
										icon="el-icon-position" :disabled="true"
										@click="pushTip(scope.row.id)"></el-button>
								</span>
							</el-tooltip>
							<el-tooltip key="btn8" v-if="scope.row.process_status!=1" effect="dark"
								:content="scope.row.is_push?'已推送完成,点击按钮可再次推送':'向维护人,推送完成锁位的消息'" placement="top">
								<span>
									<el-button :type="scope.row.is_push?'':'success'" size="mini"
										icon="el-icon-position" @click="pushTip(scope.row.id)"></el-button>
								</span>
							</el-tooltip>

							<el-tooltip key="btn9" effect="dark" content="关联合同" placement="top"
								v-if="scope.row.related_contract_id === null && scope.row.contract_name === null">
								<span>
									<el-button type="success" size="mini" @click="openLinkContractDialog(scope.row)"
										icon="el-icon-check"></el-button>
								</span>
							</el-tooltip>
							<el-tooltip key="btn10" effect="dark" content="解除合同关联" placement="top"
								v-if="scope.row.related_contract_id && scope.row.contract_name && !scope.row.hasBillSale">
								<span>
									<el-button type="danger" size="mini" @click="unLinkContract(scope.row.id)"
										icon="el-icon-close"></el-button>
								</span>
							</el-tooltip>
							<el-tooltip key="btn11" effect="dark" content="导出" placement="top">
								<span>
									<el-button size="mini" @click="exportPointDetail(scope.row)"
										icon="el-icon-download">
									</el-button>
								</span>
							</el-tooltip>


							<!-- <el-button size="mini" icon="el-icon-search" @click="getDetail(scope.row.id)">明细</el-button>
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="scope.row.process_status==2"
                         @click="remove(scope.row.id)"
              >删除
              </el-button>
              <template v-if="scope.row.hasBillSale">
                <el-tooltip v-if="scope.row.billSaleStatus ===3||scope.row.billSaleStatus ===4 && scope.row.type === 1"
                            style="float: left"
                            effect="dark"
                            content="关联销售单在流程中或者已通过,不能释放" placement="top"
                            :disabled="false"
                >
                  <div style="display: inline-block">
                    <el-button type="warning" size="mini" icon="el-icon-unlock"
                               :disabled="true"
                               @click="release(scope.row.id)"
                    >释放
                    </el-button>
                  </div>
                </el-tooltip>
                <el-button v-if="scope.row.billSaleStatus !==3 && scope.row.billSaleStatus !==4 && scope.row.type === 1"
                           type="warning" size="mini" icon="el-icon-unlock"
                           :disabled="scope.row.process_status === 1"
                           @click="release(scope.row.id)"
                >释放
                </el-button>
              </template>
              <template v-if="!scope.row.hasBillSale && scope.row.type === 1">
                <el-button
                  type="warning" size="mini" icon="el-icon-unlock"
                  :disabled="scope.row.process_status === 1"
                  @click="release(scope.row.id)"
                >释放
                </el-button>
              </template>
              <el-button v-if="scope.row.type === 1" type="danger" size="mini" icon="el-icon-lock"
                         :disabled="scope.row.process_status==2"
                         @click="lock(scope.row.id)"
              >锁定
              </el-button>
              <el-tooltip effect="dark" :content="scope.row.is_push?'已推送完成,点击按钮可再次推送':'向维护人,推送完成锁位的消息'" placement="top">
                <el-button :type="scope.row.is_push?'primary':'success'" size="mini" icon="el-icon-position"
                           :disabled="scope.row.process_status==1"
                           @click="pushTip(scope.row.id)"
                >{{ scope.row.is_push ? '已推送' : '推送' }}
                </el-button>
              </el-tooltip>
              <el-button v-show="scope.row.related_id === null && scope.row.contract_name === null" type="success"
                         size="mini" @click="openLinkContractDialog(scope.row)"
              >关联合同
              </el-button>
			  <el-button size="mini" type="primary"  @click="exportPointDetail(scope.row)">导出
			  </el-button> -->
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="searchForm.page" :page-sizes="[10, 20, 50, 100, 200, 400]"
			:page-size.sync="searchForm.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total"
			style="margin-top: 10px">
		</el-pagination>

		<el-dialog :title="related_type == null?'预锁位':(related_type == 1? '期望时间段':'补充协议')" :visible.sync="centerDialogVisible"
			:width="related_type===null?'60%':'80%'" center @close="closeCenterDialog">
			<el-form label-width="120px" style="margin: 0 auto" size="mini">
				<el-form-item label="方案类型">
					<el-radio-group v-model="related_type" @change="typeChange">
						<el-radio :label="1">普通方案</el-radio>
						<el-radio :label="2">变更市场单</el-radio>
						<el-radio :label="null">预锁位</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="related_type === 1" label="是否是换画类型">
					<el-radio-group v-model="type">
						<el-radio :label="1">否</el-radio>
						<el-radio :label="2">是</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="related_type !== null" :label="related_type === 1 ? '选择合同':'选择市场单'">

					<el-input v-model="contractSearchForm.part_a" style="width: 300px" size="mini"
                    :placeholder="related_type === 1 ? '搜索甲方名称' : '搜索市场单' " clearable>
          </el-input>
					<el-button style="margin-left: 10px" type="primary" plain @click="contractSearch">搜索</el-button>
					<el-table ref="create_is_dialog_table" max-height="700px" v-loading="contractTableLoading"
						:data="contractArr" style="margin-top: 10px" size="mini" border
						:row-class-name="tableRowClassName">
						<el-table-column fixed="left" width="50" label="序号" align="center">
							<template slot-scope="scope">
								<span>{{ (contractListParams.page - 1) * contractListParams.page_size + scope.$index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column v-if="related_type === 1" label="合同名称" width="400" show-overflow-tooltip
							align="center">
							<template
								slot-scope="scope"><span>{{ scope.row.part_a + '——' + scope.row.contract_num }}</span>
							</template>
						</el-table-column>
						<el-table-column v-if="related_type === 2" label="市场单" min-width="250" show-overflow-tooltip
							align="center" key="bsName">
							<template
								slot-scope="scope"><span>{{ scope.row.customer_name + '——' + scope.row.contract_num }}</span>
							</template>
						</el-table-column>
						<el-table-column v-if="related_type === 2" label="执行时间" width="200" align="center" key="exeTime">
							<template slot-scope="scope">
								<span>
									{{ scope.row.actual_execute_time_start + '~' + scope.row.actual_execute_time_end }}
								</span>
							</template>
						</el-table-column>
						<el-table-column v-if="related_type === 2" label="执行金额" width="100" show-overflow-tooltip
							align="center" key="exeMoney">
							<template
								slot-scope="scope"><span>{{ scope.row.execute_amount ? scope.row.execute_amount : 0 }}</span>
							</template>
						</el-table-column>
						<el-table-column v-if="related_type === 2" label="方案" min-width="250" show-overflow-tooltip
							align="center" key="insName">
							<template
								slot-scope="scope"><span>{{ scope.row.insName }}</span>
							</template>
						</el-table-column>
						<el-table-column v-if="related_type === 2" label="资源" min-width="150" show-overflow-tooltip
							align="center" key="insMedia">
							<template slot-scope="scope">
								<span v-for="(item,index) in (scope.row.mediaCountList || [])"
									:key="scope.row.id+'_MP_'+item.name" :index="index">
									{{ item.name + '（' + item.num + '个）;' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column v-if="related_type === 1" label="合同时间" min-width="90" align="center">
							<template slot-scope="scope">
								<span>
									{{ scope.row.contract_begin_date + '~' + scope.row.contract_end_date }}
								</span>
							</template>
						</el-table-column>
						<el-table-column v-if="related_type === 1" label="自有资源" min-width="100" show-overflow-tooltip
							align="center">
							<template slot-scope="scope">
								<span v-for="(item,index) in (scope.row.mediaCountList || [])"
									:key="scope.row.id+'_ZY_'+item.id" :index="index">
									{{ item.name + '（' + item.num + '个）;' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column v-if="related_type === 1" label="代理资源" min-width="100" show-overflow-tooltip
							align="center">
							<template slot-scope="scope">
								<span v-for="(item,index) in (scope.row.proxyMediaCountList || [])"
									:key="scope.row.id+'_DL_'+item.id" :index="index">
									{{ item.name + '（' + item.num + '个）;' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="120" align="center">
							<template slot-scope="scope">
								<el-button v-if="selected_contract === null || scope.row.id !== selected_contract.id "
									:disabled="selected_contract !== null" size="mini" type="primary"
									@click="selected(scope.row)">选中
								</el-button>
								<el-button v-if="selected_contract !== null && scope.row.id === selected_contract.id"
									size="mini" type="danger" @click="uncheck">取消选中
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="contractHandleSizeChange" @current-change="contractHandleCurrentChange"
						:current-page.sync="contractSearchForm.page" :page-sizes="[10,20,50,100, 200, 400]"
						:page-size.sync="contractSearchForm.page_size" layout="total, sizes, prev, pager, next, jumper"
						:total="contractTotal">
					</el-pagination>
				</el-form-item>
				<el-form-item label="选择时间段">
					<el-date-picker v-model="daterange" :value="[new Date(),new Date()]" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left: 5px"
						value-format="yyyy-MM-dd" format="yyyy年MM月dd日" :clearable="false" size="mini">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
				<el-button size="mini" type="primary" @click="toCreatePointPlan">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="锁定明细" :visible.sync="lockInfoDialogVisible" width="70%" center @close="closeDetailDialog">
			<div v-for="(item,index) in dateRangeVOList" v-loading="lockInfoTableLoading" :key="index"
				style="padding: 20px 0">
				<el-table :data="item.buildingPointVOList"
					:header-cell-style="{textAlign: 'center',fontSize:'14px',fontWeight:'blod',color:'black'}">
					<el-table-column :label="item.beginDate+'~'+item.endDate" header-align="canter">
						<el-table-column prop="name" label="楼盘名称" min-width="120" align="center"></el-table-column>
						<el-table-column v-for="pointId in item.arr" :key="pointId" :label="getPointTypeName(pointId)"
							min-width="120" align="center">
							<template slot-scope="scope">
								<el-button v-if="scope.row.pointTypeCountVOMap[pointId].point_type_count>0" size="mini"
									type="text"
									@click="showPoint(getPointTypeName(pointId),scope.row.pointTypeCountVOMap[pointId])">
									{{ scope.row.pointTypeCountVOMap[pointId].point_type_count }}
								</el-button>
								<span v-else>{{ scope.row.pointTypeCountVOMap[pointId].point_type_count }}</span>
							</template>
						</el-table-column>
					</el-table-column>
				</el-table>
			</div>
			<div v-if="dateRangeVOList.length==0" v-loading="lockInfoTableLoading" style="height: 50px"></div>
			<el-dialog title="点位详情" :visible.sync="pointDialogVisible" width="70%" center append-to-body
				@close="closePointDetailDialog">
				<el-table :data="pointDataArr" style="width: 100%" border>
					<el-table-column label="序号" width="50" align="center">
						<template slot-scope="scope">
							<span>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="点位" width="200" align="center">
						<span>{{ tmpTypeName }}</span>
					</el-table-column>
					<el-table-column label="编号" width="200" align="center" prop="code">
					</el-table-column>
					<el-table-column label="详情" min-width="400" align="center">
						<template slot-scope="scope">
							<span>{{
                  (scope.row.building_number != null ? scope.row.building_number + '号楼' : '') +
                  (scope.row.unit_number != null ? scope.row.unit_number + '单元' : '') +
                  (scope.row.floor != null ? scope.row.floor + '层' : '')
                }}</span>
						</template>
					</el-table-column>
				</el-table>
				<div style="margin-top: 5px">共计<span class="text-green">{{ sum }}</span>个</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="pointDialogVisible = false">关闭</el-button>
				</span>
			</el-dialog>
		</el-dialog>

		<el-dialog title="关联合同" :visible.sync="linkContractDialogVisible" width="350px" center
			@close="closeLinkContractDialog">
			<el-form ref="linkContractForm" :model="linkContractForm" size="mini" label-width="60px"
				:rules="linkContractFormRules">
				<el-form-item v-loading="linkContractSelectLoading" label="合同" prop="link_contract_id">
					<el-select style="width: 100%" v-model="linkContractForm.link_contract_id">
						<el-tooltip v-for="contract in linkContractList" :key="contract.id" effect="dark"
							placement="right">
							<div slot="content">
								<div>{{contract.contract_begin_date}} ~ {{contract.contract_end_date}}</div>
								<div v-if="(contract.mediaCountList || []).length > 0">自有资源：</div>
								<div v-for="(item,index) in (contract.mediaCountList || [])"
									:key="contract.id+'_ZY_'+item.id">
									{{ '   ' + (index+1) + '、' + item.name + '(' + item.num + '个)' }}
								</div>
								<div v-if="(contract.proxyMediaCountList || []).length > 0">代理资源：</div>
								<div v-for="(item,index) in (contract.proxyMediaCountList || [])"
									:key="contract.id+'_DL_'+item.id">
									{{ '   ' + (index+1) + '、' + item.name + '(' + item.num + '个)' }}
								</div>
							</div>
							<el-option :value="contract.id"
								:label="contract.customerName+'——'+contract.contract_num"></el-option>
						</el-tooltip>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="linkContractDialogVisible = false">取 消</el-button>
				<el-button size="mini" type="primary" @click="linkContract">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="关联小程序意向方案" :visible.sync="linkMiniPlanDialogVisible" width="60%"
			@close="closeLinkMiniPlanDialogVisible" center>
			<div>
				<el-form :inline="true" ref="miniPlanSearchForm" size="mini">
					<SearchFormBox :show-more-btn="false">
						<template slot="showSearch">
							<el-form-item label="提交人" prop="currentUserId">
								<el-select v-model="miniPlanSearchForm.currentUserId" clearable>
									<el-option v-for="user in saleArr" :key="user.id" :value="user.id"
										:label="user.name"></el-option>
								</el-select>
							</el-form-item>
						</template>
						<template slot="searchBtn">
							<el-form-item>
								<el-button size="mini" type="primary" plain @click="miniSearch">查询</el-button>
								<el-button size="mini" type="info" plain @click="resetSearch">重置</el-button>
							</el-form-item>
						</template>
					</SearchFormBox>
				</el-form>
				<el-form v-if="miniPlan !== null" size="mini">
					<el-form-item label="时间段">
						<el-date-picker v-model="dataRange" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
							format="yyyy年MM月dd日">
						</el-date-picker>
					</el-form-item>
				</el-form>
				<el-table v-loading="miniPlanTableLoading" :data="miniPlanTableData" size="mini" stripe border>
					<el-table-column prop="created_at" width="200" label="推送时间" align="center"
						show-overflow-tooltip></el-table-column>
					<el-table-column prop="user_name" width="100" label="推送人" align="center"
						show-overflow-tooltip></el-table-column>
					<el-table-column prop="customer" width="300" label="客户" align="center"
						show-overflow-tooltip></el-table-column>
					<el-table-column label="时间" width="300" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-tag type="primary"
								size="mini">{{ scope.row.vo_begin_date + '~' + scope.row.vo_end_date }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="点位总位数" width="100" align="center" prop="need_count_sum"></el-table-column>
					<el-table-column label="媒体类型及位数" min-width="250" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<div v-for="media in scope.row.mt_need">
								{{ media.media_type_name + '：' + media.need_count }}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="楼盘" min-width="250" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<div>
								{{
                  (scope.row.buildings || []).map(item => {
                    return item.name
                  }).join('、')
                }}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="120" fixed="right" align="center">
						<template slot-scope="scope">
							<el-button v-show="(miniPlan||{}).id !== scope.row.id" type="primary" size="mini"
								:disabled="miniPlan !== null" @click="select(scope.row)">选中
							</el-button>
							<el-button v-show="(miniPlan||{}).id === scope.row.id" type="danger" size="mini"
								@click="unSelect">
								取消选中
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleMiniPlanSizeChange" @current-change="handleMiniPlanCurrentChange"
					:current-page.sync="miniPlanSearchForm.page" :page-sizes="[10, 20, 50, 100, 200, 400]"
					:page-size.sync="miniPlanSearchForm.page_size" layout="total, sizes, prev, pager, next, jumper"
					:total="miniPlanTotal" style="margin-top: 10px">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="linkMiniPlanDialogVisible = false">取 消</el-button>
				<el-button size="mini" type="primary" @click="selectMiniPlan">确 定</el-button>
			</span>
		</el-dialog>

      <el-dialog title="复制锁位" :visible.sync="copyPlanDialogVisible" width="50%" @close="closeCopyPlanDialogVisible" center>
          <div>
              <el-form size="mini">
                <el-form-item label="名称">
                  <el-input v-model="copyPlanName" placeholder="请输入方案名称" clearable/>
                </el-form-item>

                <el-form-item label="是否是换画类型">
                  <el-radio-group v-model="copyPlanType">
                    <el-radio :label="1">否</el-radio>
                    <el-radio :label="2">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="时间段">
                  <el-date-picker v-model="copyPlanDateRange" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                                  format="yyyy年MM月dd日">
                  </el-date-picker>
                </el-form-item>
              </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
				    <el-button size="mini" @click="copyPlanDialogVisible = false">取 消</el-button>
				    <el-button size="mini" type="primary" @click="copyPlan">确 定</el-button>
			    </span>
      </el-dialog>

	</div>
</template>

<script>
	import SearchFormBox from '@/components/SearchFormBox'
  import {
    detail,
    link_contract,
    unlink_contract,
    list,
    lock_by_id,
    needSelectPage,
    push_msg,
    release,
    remove,
    export_point_detail,
    copy_plan, save
  } from '@/api/business/intention_scheme'
	import {
		list_all3rd_bycode
	} from '@/api/business/setting/dict'
	import {
		list_media_types_not_include_gas_station
	} from '@/api/building/building'
	import {
		list as saleOrderList
	} from '@/api/saleOrder/index'
	import {
		listByCustomerId,
		listLatest
	} from '@/api/contract'
	import {
		list_by_role_code
	} from '@/api/system/user'
  import {listDetail, listNew} from "@/api/merketOrder";

	export default {
		name: 'point_plan',
		components: {
			SearchFormBox
		},
		async created() {
			/**
			 * 初始化点位类型数据
			 */
			this.tableLoading = true
			await list_media_types_not_include_gas_station().then(
				res => {
					this.point_type_arr = res.data
				}
			)
			this.getList()
			this.initPlanTypeArr()
			this.initSaleArr()
		},
		data() {
			return {
				searchForm: {
					planName: null,
					planType: null,
					mediaPointCode: null,
					lockStatus: null,
					lockDateBegin: null,
					lockDateEnd: null,
					lockCycleDateBegin: null,
					lockCycleDateEnd: null,
					page: 1,
					page_size: 10
				},
				listParams: {
					planName: null,
					planType: null,
					lockStatus: null,
					lockDateBegin: null,
					lockDateEnd: null,
					lockCycleDateBegin: null,
					lockCycleDateEnd: null,
					page: 1,
					page_size: 10
				},
				plan_type_arr: [],
				tableData: [],
				tableLoading: false,
				total: null,
				lock_total: 4, // 总锁定点位数
				current_take_effect: 1, // 当前生效点位数
				future_take_effect: 0, // 未来生效点位数
				centerDialogVisible: false,
				daterange: null,
				lockInfoDialogVisible: false,
				dateRangeVOList: [],
				lockInfoTableLoading: false,
				point_type_arr: [],
				pointDialogVisible: false,
				pointDataArr: [],
				tmpTypeName: null,
				sum: 0,
				contractArr: [],
				contractSearchForm: {
					part_a: null,
					manager: true,
					mode: 0,
					excludeHasIntentionScheme: true,
					page: 1,
					page_size: 10
				},
				contractListParams: {
					part_a: null,
					manager: true,
					mode: 0,
					excludeHasIntentionScheme: true,
					page: 1,
					page_size: 10
				},
				contractTotal: 0,
				selected_contract: null,
				contractTableLoading: false,
				related_type: 1, // 1 合同 2 销售单
				related_id: null, // 单据ID
				linkContractDialogVisible: false,
				linkContractForm: {
					link_contract_id: null
				},
				linkContractFormRules: {
					link_contract_id: [{
						required: true,
						message: '请选择关联的合同',
						trigger: 'change'
					}]
				},
				linkContractSelectLoading: false,
				linkContractList: [],
				plan_id: null,
				linkMiniPlanDialogVisible: false,
				miniPlanSearchForm: {
					currentUserId: null,
					page: 1,
					page_size: 10
				},
				miniPlanListParams: {
					currentUserId: null,
					page: 1,
					page_size: 10
				},
				saleArr: [],
				miniPlanTableData: [],
				miniPlanTableLoading: false,
				miniPlanTotal: 0,
				miniPlan: null,
				dataRange: null,
				type: 1,
        copyPlanDialogVisible: false,
        copyPlanId: null,
        copyPlanDateRange: null,
        copyPlanType: 1,
        copyPlanName: null,
			}
		},
		methods: {
        /**
         * 复制锁位
         * @param id
         */
        copy(row) {
            this.$confirm('确认复制当前锁位?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.copyPlanDialogVisible = true
                this.copyPlanDateRange = null
                this.copyPlanId = row.id
                this.copyPlanName = row.plan_name
            }).catch(() => {

            })
        },
        copyPlan(){

            if (this.copyPlanName == null || this.copyPlanName == undefined){
                this.$message.error('请输入方案名称')
                return false
            }

            if (this.copyPlanDateRange == null || this.copyPlanDateRange == undefined || this.copyPlanDateRange.length == undefined){
                this.$message.error('请选择时间段')
                return false
            }

            // if (this.copyPlanType === 2) {
            //     if (this.copyPlanDateRange[0] !== this.copyPlanDateRange[1]) {
            //         this.$message.error('换画类型锁位开始时间和结束时间应该为同一天')
            //         return
            //     }
            // }

            const loading = this.$loading({
                lock: true,
                text: '提交中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            copy_plan({
                planId: this.copyPlanId,
                type: this.copyPlanType,
                planName: this.copyPlanName,
                beginDate: this.copyPlanDateRange[0],
                endDate: this.copyPlanDateRange[1],
            }).then(res => {
                  if (res.code == 200) {
                    this.$message({
                      message: '操作成功',
                      type: 'success'
                    })
                    this.closeThisPage()
                    this.closeCopyPlanDialogVisible()
                  }
                  loading.close()
                }
                ).catch(() => {
                    this.closeCopyPlanDialogVisible()
                    loading.close()
                })
        },
      closeCopyPlanDialogVisible: function (){
          this.copyPlanDialogVisible = false
          this.copyPlanDateRange = null
          this.copyPlanId = null
          this.copyPlanName = null
      },
			exportPointDetail(row) {
				const params = {
					id: row.id,
					name: row.plan_name
				}
				export_point_detail(params)
			},
			search() {
				this.searchForm.page = 1
				this.listParams = Object.assign({}, this.searchForm)
				this.getList()
			},
			getList() {
				this.tableLoading = true
				list(this.listParams).then(res => {
					if (res.code == 200) {
						this.tableLoading = false
						this.tableData = res.data.records
						this.total = res.data.total
					}
				}).catch(() => {
					this.tableLoading = false
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields()
				this.listParams = Object.assign({}, this.searchForm)
				this.getList()
			},
			handleSizeChange(val) {
				this.listParams.page_size = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.listParams.page = val
				this.getList()
			},
			contractHandleSizeChange(val) {
				this.contractListParams.page_size = val
				this.getContractArr()
			},
			contractHandleCurrentChange(val) {
				this.contractListParams.page = val
				this.getContractArr()
			},
			showDaterange() {
				this.centerDialogVisible = true
				this.getContractArr()
				this.daterange = [this.getDateStr(new Date()), this.getDateStr(new Date())]
			},
			toCreatePointPlan() {
				if (this.related_type !== null && this.selected_contract === null) {
					this.$message.error('请选择' + (this.related_type === 2 ? '销售单' : '合同'))
					return
				}
				if (this.type === 2) {
					if (this.daterange[0] !== this.daterange[1]) {
						this.$message.error('换画类型锁位开始时间和结束时间应该为同一天')
						return
					}
				}
        this.centerDialogVisible = false
				this.$router.push({
					name: 'point_plan_detail',
					params: {
						related_type: this.related_type === null ? 1 : this.related_type,
						related_id: this.selected_contract ? this.selected_contract.id : null,
						daterange: this.daterange,
            intention_scheme_id: this.selected_contract ? this.selected_contract.intention_scheme_id : null,
						choose_id: this.selected_contract ? this.selected_contract.choose_id : null,
						customer_id: this.selected_contract ? this.selected_contract.customer_id : null,
						type: this.type
					}
				})
			},
			getDateStr(date) {
				return date.getFullYear() + '-' + ((date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date
					.getMonth() + 1)) + '-' + (date.getDate() > 9 ? date.getDate() : ('0' + date.getDate()))
			},
			/**
			 * 初始化方案类型
			 */
			initPlanTypeArr() {
				list_all3rd_bycode({
					code: 'xwfa-lx'
				}).then(
					res => {
						this.plan_type_arr = res.data
					}
				)
			},
			/**
			 * 获取点位类型名称
			 * @param id
			 * @returns {string|*}
			 */
			getPointTypeName(id) {
				const tmp = this.point_type_arr.find(item => item.id == id)
				if (tmp) {
					return tmp.name
				} else {
					return ''
				}
			},
			/**
			 * 获取点位明细
			 * @param id
			 */
			getDetail(id) {
				this.lockInfoTableLoading = true
				this.lockInfoDialogVisible = true
				detail({
					id
				}).then(res => {
					let arr = []
					res.data.dateRangeVOList.forEach(item => {
						item.buildingPointVOList.forEach(i => {
							let keys = Object.keys(i.pointTypeCountVOMap)
							keys.forEach(t => {
								if (arr.find(tmp => tmp == t) == undefined) {
									arr.push(t)
								}
							})
							this.$set(item, 'arr', arr)
						})
					})
					this.dateRangeVOList = res.data.dateRangeVOList
					this.lockInfoTableLoading = false
				})
			},
			/**
			 * 关闭方案详情弹框
			 */
			closeDetailDialog() {
				this.dateRangeVOList = []
			},
			/**
			 * 显示弹框
			 * @param name
			 * @param arr
			 */
			showPoint(name, arr) {
				this.pointDataArr = arr.mediaPointList
				this.tmpTypeName = name
				this.sum = arr.point_type_count
				this.pointDialogVisible = true
			},
			/**
			 * 关闭点位详情弹框
			 */
			closePointDetailDialog() {
				this.pointDataArr = []
				this.tmpTypeName = ''
				this.sum = 0
			},
			/**
			 * 编辑
			 * @param id
			 */
			edit(row) {
				this.$router.push({
					name: 'point_plan_detail',
					params: {
						id: row.id,
						billSaleStatus: row.billSaleStatus
					}
				})
			},
			/**
			 * 锁定
			 * @param id
			 */
			lock(id) {
				this.$confirm('确认锁定?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '提交中',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					lock_by_id({
						id
					}).then(
						res => {
							if (res.data.error_type == undefined) {
								this.$message({
									type: 'success',
									message: '操作成功'
								})
								loading.close()
								this.getList()
							} else {
								this.$message.error('点位有冲突，锁定失败')
								loading.close()
							}
						}).catch(() => {
						loading.close()
					})
				}).catch(() => {

				})
			},
			/**
			 * 释放
			 * @param id
			 */
			release(id) {
				this.$confirm('是否确认释放', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '提交中',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					release({
						id
					}).then(
						res => {
							this.$message({
								type: 'success',
								message: '操作成功'
							})
							loading.close()
							this.getList()
						}
					).catch(() => {
						loading.close()
					})
				}).catch(() => {})
			},
			/**
			 * 删除
			 * @param id
			 */
			remove(id) {
				this.$confirm('是否确认删除', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '提交中',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					remove({
						id
					}).then(
						res => {
							this.$message({
								type: 'success',
								message: '操作成功'
							})
							loading.close()
							this.getList()
						}
					).catch(() => {
						loading.close()
					})
				}).catch(() => {})
			},
			/**
			 * 推送提醒
			 * @param id
			 */
			pushTip(id) {
				this.$confirm('是否确认推送', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '推送中',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					push_msg({
						id
					}).then(
						res => {
							this.$message({
								type: 'success',
								message: '推送成功'
							})
							loading.close()
							this.getList()
						}
					).catch(() => {
						loading.close()
					})
				}).catch(() => {})
			},
			/**
			 * 获取合同数据
			 */
			contractSearch() {
				this.contractSearchForm.page = 1
				this.contractListParams = Object.assign({}, this.contractSearchForm)
				this.getContractArr()
			},
			getContractArr() {
				this.contractTableLoading = true
				if (this.related_type === 2) {
					let request = Object.assign({}, this.contractListParams)
          listDetail(request).then(res => {
            this.contractTableLoading = false
            this.contractArr = res.data.records
            this.contractTotal = res.data.total
          }).catch(() => {
            this.contractTableLoading = false
          })
					// saleOrderList(request).then(res => {
					// 	this.contractTableLoading = false
					// 	this.contractArr = res.data.records
					// 	this.contractTotal = res.data.total
					// }).catch(() => {
					// 	this.contractTableLoading = false
					// })
				} else if (this.related_type === 1) {
					listLatest(this.contractListParams).then(res => {
						this.contractTableLoading = false
						this.contractArr = res.data.records
						this.contractTotal = res.data.total
					}).catch(() => {
						this.contractTableLoading = false
					})
				}

			},
			selected(row) {
				this.selected_contract = Object.assign({}, row)
			},
			uncheck() {
				this.selected_contract = null
			},
			typeChange() {
				this.contractSearchForm.part_a = null
				this.contractListParams = Object.assign({}, this.contractSearchForm)
				this.selected_contract = null
				this.type = 1
				this.getContractArr()
				if (this.$refs.create_is_dialog_table) this.$refs.create_is_dialog_table.doLayout();
			},
			tableRowClassName({
				row
			}) {
				if (this.selected_contract != null && this.selected_contract.id === row.id) {
					return 'success-row'
				}
				return ''
			},
			closeCenterDialog() {
				this.selected_contract = null
			},
			closeLinkContractDialog() {
				this.linkContractForm.link_contract_id = null
				this.plan_id = null
				this.linkContractList = []
			},
			openLinkContractDialog(row) {
				this.plan_id = row.id
				this.linkContractDialogVisible = true
				this.getLinkContractList(row.customer_id)
				this.$nextTick(() => {
					this.$refs.linkContractForm.clearValidate()
				})
			},
			unLinkContract(id) {
				this.$confirm('是否确认解除关联', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '提交中',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					unlink_contract({
						id
					}).then(
						res => {
							this.$message({
								type: 'success',
								message: '操作成功'
							})
							loading.close()
							this.getList()
						}
					).catch(() => {
						loading.close()
					})
				}).catch(() => {})
			},
			getLinkContractList(customer_id) {
				this.linkContractSelectLoading = true
				listByCustomerId({
					customerId: customer_id
				}).then(res => {
					this.linkContractList = res.data
					this.linkContractSelectLoading = false
				}).catch(() => {
					this.linkContractSelectLoading = false
				})
			},
			linkContract() {
				this.$refs.linkContractForm.validate(flag => {
					if (flag) {
						const loading = this.$loading({
							lock: true,
							text: '提交中',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						})
						link_contract({
							id: this.plan_id,
							contract_id: this.linkContractForm.link_contract_id
						}).then(res => {
							this.linkContractDialogVisible = false
							this.getList()
							loading.close()
						}).catch(() => {
							loading.close()
						})
					}
				})
			},
			closeLinkMiniPlanDialogVisible() {
				this.miniPlan = null
				this.miniPlanSearchForm = {
					currentUserId: null,
					page: 1,
					page_size: 10
				}
				this.miniPlanListParams = {
					currentUserId: null,
					page: 1,
					page_size: 10
				}
			},
			initSaleArr() {
				list_by_role_code({
					code: 'Salesperson'
				}).then(res => {
					this.saleArr = res.data.filter(user => user.status === 1)
				})
			},
			openLinkMiniDialog() {
				this.linkMiniPlanDialogVisible = true
				this.getLinkMiniList()
			},
			miniSearch() {
				this.miniPlanListParams = Object.assign({}, this.miniPlanSearchForm)
				this.getLinkMiniList()
			},
			resetSearch() {
				this.$refs.miniPlanSearchForm.resetFields()
				this.miniPlanListParams = Object.assign({}, this.miniPlanSearchForm)
				this.getLinkMiniList()
			},
			getLinkMiniList() {
				this.miniPlanTableLoading = true
				needSelectPage(this.miniPlanListParams).then(res => {
					this.miniPlanTableLoading = false
					this.miniPlanTableData = res.data.records
					this.miniPlanTotal = res.data.total
				})
			},
			handleMiniPlanSizeChange(val) {
				this.miniPlanListParams.page_size = val
				this.getLinkMiniList()
			},
			handleMiniPlanCurrentChange(val) {
				this.miniPlanListParams.page = val
				this.getLinkMiniList()
			},
			selectMiniPlan() {
				if (this.miniPlan === null) {
					this.$message.error('请选择方案')
				} else if (this.dataRange === null || !this.dataRange || this.dataRange.length < 2) {
					this.$message.error('请选择时间段')
				} else {
          this.linkMiniPlanDialogVisible = false
					this.$router.push({
						name: 'point_plan_detail',
						params: {
							related_type: 1,
							related_id: null,
							daterange: this.dataRange,
							choose_id: null,
							customer_id: this.miniPlan.customer_id,
							building_ids: this.miniPlan.buildings.map(building => {
								return building.id
							})
						}
					})
				}
			},
			select(row) {
				this.miniPlan = row
				this.dataRange = [row.begin_date, row.end_date]
			},
			unSelect() {
				this.miniPlan = null
				this.dataRange = null
			}
		}
	}
</script>

<style scoped>
	.app_main {
		padding: 20px 20px 0 20px;
	}

	/deep/ .el-date-editor .el-range-separator {
		width: 10%;
	}

	/deep/ .el-table .success-row {
		background: #f0f9eb;
	}

	.btn_group_box span {
		float: left;
	}
</style>
